<template>
  <view class="content-view">
    <!-- 非缺省页 -->
    <view v-if="defaultPageDisplay === true" class="contacts-list">
      <!-- 帮助图片 -->
      <view class="help-image" @click="showModal">
        <image src="@/static/image/default/contacts/help.png" />
      </view>
      <!-- 循环列表 -->
      <view :class="devtools === 'ios' ? 'guestList-fa-ios' : 'guestList-fa'">
        <view
          v-for="(item, index) in guestList"
          :key="item.uid"
          class="guestList"
        >
          <view
            :data-index="index"
            class="guestList-view"
            scroll-x="true"
            :style="'right:' + item.right + 'rpx'"
            @touchstart="drawStart"
            @touchmove="drawMove"
          >
            <view class="guestList-item-content" @click="editGuest(item)">
              <view class="guestList-item-content-left">
                <text>{{ item.full_name }}</text>
                <text>{{ commonDictMap[item.id_type_display] }}</text>
              </view>
              <view class="guestList-item-content-right">
                <text>{{ item.telephone | formatDataHide(3, 7) }}</text>
                <text>{{ item.id_no | formatDataHide(6, 14) }}</text>
              </view>
            </view>
            <view
              class="guestList-item-delete"
              @click="deleteGuest(item.uid)"
            >删除</view>
          </view>
        </view>
      </view>
      <!-- 创建按钮 -->
      <view
        :class="
          devtools === 'ios' ? 'establish-button-ios' : 'establish-button'
        "
      >
        <button @click="createGuest">创建旅客</button>
      </view>
    </view>
    <!-- 缺省页组件 -->
    <defaultPage
      v-if="defaultPageDisplay === false"
      :content="content"
      @changeData="changeData"
    />
    <!-- 创建页面模态框 -->
    <bottomPop
      :show="show"
      :query="query"
      @close="close"
      @createAndEditGuest="createAndEditGuest"
    />
  </view>
</template>
<script>
import defaultPage from '@com/default'
import { getGuest, deleteGuest } from '@api/mine'
import { get } from '@utils/storage'
import bottomPop from '@com/bottomPop'
import { formatData, showToast } from '@utils/myApproach'
export default {
  filters: {
    formatDataHide(data, startIndex, endIndex) {
      return formatData(data, startIndex, endIndex)
    }
  },
  components: {
    defaultPage,
    bottomPop
  },
  data() {
    return {
      defaultPageDisplay: null,
      guestList: [],
      show: false,
      query: {},
      commonDictMap: this.$commonDictMap,
      startX: null,
      pagingData: {
        page: 1,
        limit: 10
      },
      length: null,
      // 防抖函数
      antiShake: null
    }
  },
  computed: {
    content() {
      const data = {
        url: '../static/image/default/contacts.png',
        text: '您还未设置常用旅客，点击下方按钮创建。',
        button: {
          display: true,
          text: '立即创建'
        }
      }
      return data
    },
    devtools() {
      return get('devtools')
    }
  },
  created() {
    this.getGuest()
    this.antiShake = this.shakeProof(this.dropDowwn, 1000)
  },
  // 触底事件
  onReachBottom() {
    this.antiShake()
  },
  methods: {
    shakeProof(antiShake, delay) {
      let timer
      return function(args) {
        const that = this
        clearInterval(timer)
        timer = setTimeout(() => {
          antiShake.call(that, args)
        }, delay)
      }
    },
    dropDowwn() {
      if (this.defaultPageDisplay && this.length === null) {
        getGuest(this.pagingData).then((res) => {
          if (res.data.data.data.length === 10) {
            this.$set(this.pagingData, 'page', this.pagingData.page + 1)
            this.getGuest()
          }
        })
      }
    },
    changeData() {
      this.defaultPageDisplay = true
      this.show = true
      this.query.type = 'CREATE'
    },
    createAndEditGuest(data) {
      // const remainder = this.guestList.length % 10
      const total = this.pagingData.page * 10

      switch (data[0]) {
        case 'CREATE':
          if (total > this.guestList.length) {
            // 需要push
            getGuest(this.pagingData).then((res) => {
              if (res.data.data.data.length === 0) {
                const pageData = {
                  page: this.pagingData.page - 1,
                  limit: 10
                }
                getGuest(pageData).then((response) => {
                  const guestListItem =
                    res.data.data.data[res.data.data.data.length - 1]
                  this.guestList.push(guestListItem)
                  showToast('创建成功')
                })
              } else {
                const guestListItem =
                  res.data.data.data[res.data.data.data.length - 1]
                this.guestList.push(guestListItem)
                showToast('创建成功')
              }
            })
          } else {
            showToast('创建成功')
          }
          break
        case 'EDIT':
          var pageData = {
            page: 1,
            limit: 100
          }
          getGuest(pageData)
            .then((res) => {
              res.data.data.data.forEach((item) => {
                if (item.uid === data[1]) {
                  this.guestList.forEach((value, index, arr) => {
                    if (value.uid === data[1]) {
                      arr[index] = item
                      this.$forceUpdate()
                    }
                  })
                }
              })
            })
            .then(() => {
              showToast('编辑成功')
            })
          break
      }
    },
    getGuest() {
      getGuest(this.pagingData).then((res) => {
        if (this.pagingData.page !== 1 && res.data.data.data.length === 0) {
          return (this.length = 0)
        } else {
          this.length = null
          this.defaultPageDisplay = !!res.data.data.data.length
        }
        res.data.data.data.forEach((item) => {
          this.guestList.push(item)
        })
        if (this.guestList.length !== 0) {
          this.guestList.forEach((item) => {
            this.$set(item, 'right', -80)
          })
        }
      })
    },
    createGuest() {
      this.show = true
      this.query.type = 'CREATE'
    },
    close() {
      this.show = false
    },
    // 开始触摸
    drawStart(e) {
      var touch = e.touches[0]
      this.startX = touch.clientX
    },
    // 触摸滑动
    drawMove(e) {
      var touch = e.touches[0]
      // var item = this.guestList[e.currentTarget.dataset.index]
      var disX = this.startX - touch.clientX

      if (disX > 0) {
        this.$set(this.guestList[e.currentTarget.dataset.index], 'right', 0)
      } else {
        this.$set(this.guestList[e.currentTarget.dataset.index], 'right', -80)
      }
    },
    // 帮助模态框
    showModal() {
      uni.showModal({
        content: '向左滑动可以删除常用旅客',
        showCancel: false,
        confirmText: '知道了',
        confirmColor: '#66C95D'
      })
    },
    // 删除常用旅客
    deleteGuest(uid) {
      deleteGuest(uid).then((res) => {
        const index = this.guestList.findIndex((item) => {
          return item.uid === uid
        })
        this.guestList.splice(index, 1)

        // 删除的时候需要判断是否占满屏幕，如果没有需要重新push一个
        const remainder = this.guestList.length % 10
        if (remainder === 9) {
          const rounding = parseInt(this.guestList.length / 10)
          getGuest({ page: rounding + 1, limit: 10 }).then((res) => {
            if (res.data.data.data.length === 10) {
              this.guestList.push(res.data.data.data[9])
            }
            showToast('删除成功')
          })
        } else {
          showToast('删除成功')
        }
        if (
          this.pagingData.page - parseInt(this.guestList.length / 10) > 1 &&
          this.pagingData.page !== 1
        ) {
          this.$set(this.pagingData, 'page', this.pagingData.page - 1)
        }
      })
    },
    // 编辑常用旅客
    editGuest(item) {
      this.show = true
      this.query.type = 'EDIT'
      this.query.item = item
    }
  }
}
</script>
<style>
/* 主体部分 */
.contacts-list {
  width: 750rpx;
  min-height: 100vh;
  background-color: #f0f2f5;
}
/* 帮助图片 */
.help-image {
  min-height: 48rpx;
  margin-bottom: 60rpx;
}
.help-image > image {
  width: 48rpx;
  height: 48rpx;
  margin-top: 30rpx;
  margin-right: 30rpx;
  float: right;
}
/* 循环列表 */
.guestList-fa {
  padding-bottom: 160rpx;
}
.guestList-fa-ios {
  padding-bottom: 220rpx;
}
.guestList {
  position: relative;
  width: 710rpx;
  height: 176rpx;
  margin-left: 20rpx;
  margin-top: 30rpx;
  overflow: hidden;
  border-radius: 8rpx;
  border-radius: 8rpx;
  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
}
.guestList-view {
  transition: all 0.4s;
  position: absolute;
  width: 790rpx;
  height: 176rpx;
  background-color: #ffffff;
}
.guestList-item-content {
  float: left;
  justify-content: space-between;
  background-color: #ffffff;
  display: flex;
  width: 710rpx;
  height: 176rpx;
}
.guestList-item-content-left {
  justify-content: space-between;
  flex-direction: column;
  display: flex;
  text-align: left;
}
.guestList-item-content-left > text:nth-child(1) {
  margin-top: 28rpx;
  margin-left: 30rpx;
  font-size: 32rpx;
  color: #000000;
  font-weight: 800;
}
.guestList-item-content-left > text:nth-child(2) {
  margin-bottom: 44rpx;
  margin-left: 30rpx;
  font-size: 28rpx;
}
.guestList-item-content-right {
  text-align: right;
  justify-content: space-between;
  flex-direction: column;
  display: flex;
}
.guestList-item-content-right > text:nth-child(1) {
  margin-top: 28rpx;
  margin-right: 30rpx;
}
.guestList-item-content-right > text:nth-child(2) {
  margin-bottom: 44rpx;
  margin-right: 30rpx;
}
.guestList-item-delete {
  float: right;
  width: 80rpx;
  height: 176rpx;
  font-size: 24rpx;
  text-align: center;
  background-color: #ff5353;
  line-height: 176rpx;
  color: #ffffff;
}
/* 创建按钮 */
.establish-button {
  width: 750rpx;
  height: 160rpx;
  position: fixed;
  bottom: 0;
  background-color: #f0f2f5;
}
.establish-button > button {
  padding: 0;
  margin: 0;
  width: 650rpx;
  height: 80rpx;
  margin-left: 50rpx;
  margin-bottom: 40rpx;
  margin-top: 40rpx;
  background-color: #306de9;
  font-size: 32rpx;
  text-align: center;
  line-height: 80rpx;
  color: #ffffff;
}
.establish-button-ios {
  width: 750rpx;
  height: 220rpx;
  position: fixed;
  bottom: 0;
  background-color: #f0f2f5;
}
.establish-button-ios > button {
  padding: 0;
  margin: 0;
  width: 650rpx;
  height: 80rpx;
  margin-left: 50rpx;
  margin-bottom: 100rpx;
  margin-top: 40rpx;
  background-color: #306de9;
  font-size: 32rpx;
  text-align: center;
  line-height: 80rpx;
  color: #ffffff;
}
/* 底部弹框 */
.modal-box {
  position: absolute;
  top: 0;
  width: 750rpx;
  border: 1px solid red;
  height: 100vh;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>
